<template>
	<div>
		<el-card shadow="never" class="!border-none">
			<draggable class="draggable" v-model="kefuData.list" animation="300">
				<template v-slot:item="{ element: item, index }">
					<del-wrap class="max-w-[600px]" :key="index" @close="handleDelete(index)">
						<div class="bg-fill-light flex items-center w-full p-4 mb-4 cursor-move">
							<div class="ml-3 flex-1">
								<div class="">
									<div class="">* 客服名称</div>
									<el-input  v-model="item.name" placeholder="请输入客服名称" />
								</div>
								<div class="">
									<div class="mt-3">* 客服链接</div>
									<el-input  v-model="item.link" placeholder="请输入客服链接" />
								</div>
								<div class="">
									<div class="mt-3">* 客服图片</div>
									<material-picker v-model="item.logo" :limit="1" />
								</div>
							</div>
						</div>
					</del-wrap>
				</template>
			</draggable> 
			<div>
				<el-button type="primary" @click="handleAdd">添加</el-button>
			</div>
		</el-card>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'
	import Draggable from 'vuedraggable'
	// 表单数据
	const kefuData = reactive({
		list: [],
		name: 'kefu'
	})
	const handleAdd = () => {
		kefuData.list.push({
			name: '',
			link: '',
			logo:''
		})
	}
	const handleDelete = (index : number) => {
		kefuData.list.splice(index, 1)
	}
	const handleSubmit = async () => {
		await setWebsiteProject({ name: kefuData.name, content: kefuData.list })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: kefuData.name })
		if (!isEmpty(data.data)) kefuData.list = data.data;
	}

	getData()
</script>

<style lang="scss" scoped></style>